<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 适配移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人博客 - 分享技术与生活</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 顶部导航栏（Header）：包含LOGO和导航链接 -->
<div class="header">
    <div class="logo">技术随笔</div>
    <div class="nav"><!-- 导航菜单容器 -->
        <ul>
            <li><a href="index.html" class="active">首页</a></li>
            <li><a href="#">技术分类</a></li>
            <li><a href="#">生活随笔</a></li>
            <li><a href="#">关于我</a></li>
            <!-- 跳转到登录页的链接 -->
            <li><a href="login.html">登录</a></li>
        </ul>
    </div>
</div>

<!-- 主体内容区（Main）：文章列表 + 侧边栏 -->
<div class="main">
    <!-- 左侧：文章列表（模拟数据） -->
    <div class="article-list">
        <h2>最新文章</h2>
        <div class="article-item">
            <h3 class="article-title"><a href="#">Flex布局完全指南：从入门到精通</a></h3>
            <div class="article-meta">发布于 2025-11-18 · 阅读 1286</div>
            <p class="article-excerpt">Flex布局（弹性布局）是CSS3的核心布局方案，能轻松实现元素的对齐、分布和自适应... 本文将从基础概念、属性用法到实战案例，全面讲解Flex布局的核心知识点。</p>
            <a href="#" class="read-more">阅读全文 →</a>
        </div>
        <div class="article-item">
            <h3 class="article-title"><a href="#">JavaScript表单验证最佳实践</a></h3>
            <div class="article-meta">发布于 2025-11-15 · 阅读 953</div>
            <p class="article-excerpt">表单验证是前端开发的基础需求，良好的验证逻辑能提升用户体验并保障数据安全... 本文将分享非空验证、格式验证、实时反馈等实战技巧，附完整代码示例。</p>
            <a href="#" class="read-more">阅读全文 →</a>
        </div>
        <div class="article-item">
            <h3 class="article-title"><a href="#">个人博客搭建教程：HTML+CSS+JS从零开始</a></h3>
            <div class="article-meta">发布于 2025-11-10 · 阅读 1562</div>
            <p class="article-excerpt">想拥有自己的个人博客？无需复杂框架，用原生HTML、CSS、JS就能实现... 本文将一步步教你搭建博客的页面结构、美化样式和实现交互功能，适合前端初学者。</p>
            <a href="#" class="read-more">阅读全文 →</a>
        </div>
    </div>

    <!-- 右侧：侧边栏（个人介绍 + 分类导航） -->
    <div class="sidebar">
        <!-- 个人介绍 -->
        <div class="author-card">
            <h3>关于博主</h3>
            <img src="https://picsum.photos/id/1005/100/100" alt="博主头像" class="author-avatar">
            <p class="author-name">前端开发者</p>
            <p class="author-desc">专注于HTML/CSS/JS基础技术，分享实战经验和学习笔记</p>
        </div>

        <!-- 分类导航 -->
        <div class="category-list">
            <h3>文章分类</h3>
            <ul>
                <li><a href="#">CSS布局技巧 (12)</a></li>
                <li><a href="#">JavaScript教程 (18)</a></li>
                <li><a href="#">前端实战项目 (9)</a></li>
                <li><a href="#">生活随笔 (23)</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- 页脚（Footer）：版权信息 -->
<div class="footer">
    <p>© 2025 技术随笔 | 用代码记录成长</p>
</div>
</body>
</html>